<template>
  <div class="PageContent" v-loading="loading">
    <div class="PageItem">
      <el-row :gutter="20" class="el_row">
        <el-col :span="4" style="height: 100%" class="el_col">
          <el-tree
            ref="organizationtree"
            :data="treeData"
            node-key="id"
            default-expand-all
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleClick"
            v-if="treeData.length>0"
          >
          </el-tree>
          <div class="empty">
            <img :src="require('../../../static/images/empty.png')" alt="">
            <h4>暂无数据</h4>
          </div>
        </el-col>
        <el-col :span="20" class="el_col right_col">
          <div class="cemeteryTypes_wrapper" v-if="cemeteryTypes.length>0">
            <el-row :gutter="20">
              <el-col class="types_item" :span="6">
                <el-card
                  class="types_card"
                  shadow="hover"
                  @click.native="getTheTypeCemetery()"
                >
                  <div class="card_header">
                    <div class="item_item">
                      <div class="item_left">
                        <img class="left_img" src="../../../static/images/icons/icon1.png" alt="">
                      </div>
                      <div class="item_right">
                        <span class="number">+{{allNum}}</span>
                        <span>全部</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col class="types_item" :span="6" v-for="(item, index) in cemeteryTypes" :key="index">
                <el-card
                  class="types_card"
                  :class="{'noclick':item.number===0}"
                  shadow="hover"
                  @click.native="getTheTypeCemetery(item)"
                >
                  <div class="card_header">
                    <div class="item_item">
                      <div class="item_left">
                        <img class="left_img" :src="imgFormat(index+2)" alt="">
                      </div>
                      <div class="item_right">
                        <span class="number">+{{item.number}}</span>
                        <span>{{item.label}}</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="list_wrapper" v-if="wakeHalls.length > 0">
            <el-row :gutter="20">
              <el-col class="list_item" :span="6" v-for="(item, index) in wakeHalls" :key="index">
                <el-card
                  shadow="hover"
                  :class="activeClass(item.type)"

                >
                  <div class="card_header">
                    <el-tooltip class="item" effect="dark" :content="item.cemeteryName" placement="top">
                      <div class="item_item">
                        <span>{{ item.cemeteryName }}</span>
                      </div>
                    </el-tooltip>
                    <div class="item_type_box">
                      <div class="item_type_left">
                        <span>墓穴总数：</span>
                        <span>{{item.cemeterySumNumber}}</span>
                      </div>
                      <div class="item_type_right">
                        <span>格位总数：</span>
                        <span>{{item.latticeSumNumber}}</span>
                      </div>
                    </div>
                    <div class="item_type_box">
                      <div class="item_type_left">
                        <span>已安葬数：</span>
                        <span>{{item.cemeteryNum}}</span>
                      </div>
                      <div class="item_type_right">
                        <span>已用数量：</span>
                        <span>{{item.unLatticeNum}}</span>
                      </div>
                    </div>
                    <div class="item_type_box">
                      <div class="item_type_left">
                        <span>空墓穴数：</span>
                        <span>{{item.unCemeteryNum}}</span>
                      </div>
                      <div class="item_type_right">
                        <span>空闲数量：</span>
                        <span>{{item.latticeNum}}</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div v-else class="empty">
            <img :src="require('../../../static/images/empty.png')" alt="">
            <h4>暂无数据</h4>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
  // import { dataFormate } from "@/utils/index";
  import * as Type from "@/api/service";
  import SearchDialog from "../dialog/SearchDialogCopy";
  // import user from 'mock/user';

  export default {
    // props: {
    //   dialogVisible: {
    //     type: Boolean,
    //     default: true,
    //   },
    //   Changeofposition: {
    //     type: Boolean,
    //   },
    // },
    components: {
      SearchDialog,
    },
    data() {
      return {
        cemeteryTypes: [],
        loading: true,
        dialogVisibles: this.dialogVisible,//
        DialogSearch: false,//搜索弹框
        BuyerInfoDialogVisible: false,//信息弹框
        BuyerInfoFormDisabled: false,//是否禁用
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() >= Date.now();
          },
        },
        selectGWId: 0,//选择的格位Id
        isEdit: false,
        ruleForm: {
          funeralDead: {
            deadName: "",
            id: "",
            businessCode: "",
            exemptionTypeCode: "",
            deadGenderCode: "",
            memberName: "",
            certificateTypeCode: "",
            certificateNo: "",
            countryCode: "",
            deadNationCode: "",
            memberGenderCode: "",
            deadAge: "",
            deadAgeTypeCode: "",
            birthDate: "",
            cremationTypeCode: "",
            remainsStateCode: "",
            deathDate: "",
            deathCause: "",
            ashHandleTypeCode: "",
            provinceId: "",
            cityId: "",
            countyId: "",
            provinceCityCountyId: "",
            provinceCityCountyFullName: "",
            townId: "",
            villageId: "",
            beforeDeathAddress: "",
            asLocal: 1,
            householdRegistrationClassCode: "",
            householdRegistrationPlace: "",
            deathCertificateUnit: "",
            funeralCertificateUnit: "",
            asOutwardTransport: "",
            outwardTransportTime: "",
            outwardTransportPlace: "",
            benefitDistrictCode: "",
            remark: "",
            transportWayCode: "",
            transportPlace: "",
            asArrived: "",
            //是否外运
            asOuterTransport: "",
            //外运地址
            outerTransportAddress: "",
            //是否馆外司机
            asOutsideDriver: "",
            //司机id
            driverUserIdr: "",
            transportArrivedTime: "",
            arrivedTime: "",
          },
          depositBuryAgentEntity: {
            familyName: '',//姓名
            familyAddress: '',//地址
            certificateTypeCode: "",//证件类型
            certificateNo: '',//证件号码
            familyPhone: '',//手机号
          }
        }, //表单信息
        rules: {
          "funeralDead.deadName": [
            {
              required: true,
              message: "请输入逝者姓名",
              trigger: "blur",
            },
            {
              min: 1,
              max: 50,
              message: "长度在 1 到 50 个字符",
              trigger: "blur",
            },
          ],
          "funeralDead.certificateTypeCode": [
            {
              required: true,
              message: "请选择逝者证件类型",
              trigger: "change",
            },
          ],
        },//表单校验规格
        treeInfoLoad: [],
        treeData: [],
        data: [],
        defaultProps: {
          children: "children",
          label: "areaName",
        },
        wakeHalls: [],
        selectname: "",
        lastTreeData: [], //最后一层树的数据
        selectNode: {},//选中的节点
        dictionary: {}, //字典
        copydictionary: {}, //用于检索拼音
        businessCode: '',//业务编码
        businessType: '',//业务类型byg_gw_in、gm_gw_in
        saveDetailedType: '',//保存详细类型byg_gw gm_gw
        grandFather: '',//所选节点的祖父节点、根节点
        //按钮权限
        btnRight: {
          btnAddBuyerInfo: false,
          btnModifyBuryingInfo: false,
          btnCheckBuryingInfo: false,
        },
      };
    },
    filters: {
      formatType(val) {
        if (val == 1) {
          return '单格位'
        } else if (val == 2) {
          return '双格位'
        } else {
          return '未知'
        }
      }
    },
    created() {
      let userType = this.$store.getters.userInfo.organizationType
      if (userType == 1) {
        //殡仪馆用户
        this.businessType = 'byg_gw_in';
        this.saveDetailedType = 'byg_gw'
      } else if (userType == 2) {
        //公墓用户
        this.businessType = 'gm_gw_in';
        this.saveDetailedType = 'gm_gw'
      }
    },
    computed: {
      allNum() {
        let num = 0;
        this.cemeteryTypes.forEach(item => {
          num += item.number
        })
        return num

      }
    },
    watch: {
      selectNode(newVal, oldVal) {
        let fater = {}
        this.getGrandFather(this.treeInfoLoad, newVal.id)
      }
    },
    mounted() {
      //获取树型结构
      this.getTreedata();
      //获取公墓数组
      //加载数据字典
      //没有数据，加载数据
      this.$store
        .dispatch("user/getdictionary")
        .then((res) => {
          //获取字典数据
          this.dictionary = res;
          this.$set(this.dictionary, res);
          //获取未知的code
          //获取未知的code
          if (
            this.copydictionary.age_type &&
            this.copydictionary.age_type.length
          ) {
            this.copydictionary.age_type.forEach((item) => {
              if (item.dataText == "未知") {
                this.ageWeizhiFlag = item.dataCode;
              }
            });
          }
          /*判断遗体类型*/
          if (
            this.copydictionary.cremation_type &&
            this.copydictionary.cremation_type.length
          ) {
            this.copydictionary.cremation_type.forEach((item) => {
              if (item.dataText.indexOf("遗体") > -1) {
                this.cremationType = item.dataCode;
              }
            });
          }
        })
        .catch(() => console.log("promise catch err"));
      //按钮权限
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] =
          this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
      }
    },
    methods: {
      //
      imgFormat(num) {
        return require(`../../../static/images/icons/icon${num}.png`)
      },
      getTheTypeCemetery(item) {
        if (item) {
          if (item.number === 0) {
            return
          }
          let data = {
            regionType: this.selectNode.regionType,
            regionId: this.selectNode.id,
            arrtType: item.type,
          }
          this.loadOrganizationListWithParentIdData(data)
        } else {
          let data = {
            regionType: this.selectNode.regionType,
            regionId: this.selectNode.id,
          }
          this.loadOrganizationListWithParentIdData(data)
        }

      },
      //更改样式
      activeClass(val) {
        if (val === 1) {
          return 'blue'
        } else if (val == 3) {
          return 'warn'
        } else {
          return 'green'
        }
      },
      getGrandFather(arr, id) {
        arr.find(item => {
          if (item.id === id) {
            if (item.parentId === 0) {
              this.grandFather = item
            }
            this.getGrandFather(arr, item.parentId)
          }
        })
      },
      //修改安葬信息
      async modifyBuryingInfo(code) {
        this.isEdit = true
        this.BuyerInfoFormDisabled = false
        //获取安葬信息
        let postData = {
          businessCode: code
        };
        this.loading = true;
        const res = await Type["getBuryingInfo"](postData)
        if (res.code === 1) {
          this.ruleForm.funeralDead = res.data.funeralDeadEntity
          this.ruleForm.depositBuryAgentEntity = res.data.depositBuryAgentEntity
          this.BuyerInfoDialogVisible = true
        } else {
          this.$message("数据读取失败");
        }
      },
      //查看安葬信息
      async checkBuryingInfo(code) {
        //获取安葬信息
        let postData = {
          businessCode: code
        };
        this.loading = true;
        const res = await Type["getBuryingInfo"](postData)

        if (res.code === 1) {
          this.ruleForm.funeralDead = res.data.funeralDeadEntity
          this.ruleForm.depositBuryAgentEntity = res.data.depositBuryAgentEntity
          this.BuyerInfoDialogVisible = true
          this.BuyerInfoFormDisabled = true
        } else {
          this.$message("数据读取失败");
          this.BuyerInfoFormDisabled = false
        }
      },
      //保存表单信息
      saveBuyerInfoFormData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.isEdit) {
              //编辑修改
              this.changeBuyerFormInfo()
            } else {
              //新增安葬人
              this.addBuyerFormInfo()
            }

          } else {

            return false;
          }
        });
      },
      //新增安葬人
      async addBuyerFormInfo() {
        let postData = {
          businessType: this.businessType,
          depositBuryAgentEntity: this.ruleForm.depositBuryAgentEntity,
          funeralDeadEntity: this.ruleForm.funeralDead,
          id: this.selectGWId,
          saveDetailedType: this.saveDetailedType,
          saveId: this.selectGWId,
          saveType: 'gw',
        };
        this.loading = true;
        const res = await Type["addBuryingInfo"](postData)

        if (res.code == 1) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          //获取列表数据
          this.loadOrganizationListWithParentIdData(this.selectNode);
        } else {
          this.$message("数据读取失败");
        }
      },
      //编辑修改安葬信息
      async changeBuyerFormInfo() {
        let postData = {
          businessType: this.businessType,
          depositBuryAgentEntity: this.ruleForm.depositBuryAgentEntity,
          funeralDeadEntity: this.ruleForm.funeralDead,
          id: this.selectGWId,
          saveDetailedType: this.saveDetailedType,
          saveId: this.selectGWId,
          saveType: 'gw',
        };
        this.loading = true;
        const res = await Type["changeBuryingInfo"](postData)
        if (res.code == 1) {
          //this.BuyerInfoDialogVisible=false
          this.isEdit = false
          this.$message({
            message: res.message,
            type: 'success'
          });
          //获取列表数据
          this.loadOrganizationListWithParentIdData(this.selectNode);
        } else {
          this.$message("更新失败")
        }
      },
      //添加安葬信息打开搜索弹框
      addBuyerInfo(id) {

        this.selectGWId = id
        this.BuyerInfoFormDisabled = false
        this.DialogSearch = true
      },
      //关闭查询弹框调用搜索方法
      searchData() {
        this.ReadData();
      },
      //根据businessCode数据读取
      ReadData() {
        let postData = {
          businessCode: this.businessCode,
        };
        this.loading = true;
        Type["loadwithbusinesscode"](postData)
          .then((response) => {

            if (!response) {
              this.$message("数据读取失败");
              return;
            }
            const {data} = response;
            if (!data) {
              this.loading = false;
              this.$message("数据读取失败");
              return;
            }

            if (data.funeralDead) {

              this.ruleForm.funeralDead = data.funeralDead;

            }
            this.modify = false;
            // 数据读取成功
            //街道赋值
            this.loading = false;
            this.BuyerInfoDialogVisible = true
          })
          .catch((error) => {
            this.$message(error);
            this.loading = false;
          });
      },
      //拼音或中文检索
      PinyinMatchnation(val) {
        if (val) {
          let result = [];
          this.dictionary.nation.filter((item) => {
            if (item.dataTextAbbr.indexOf(val) != -1) {
              result.push(item);
            } else if (item.dataText && item.dataText.indexOf(val) != -1) {
              result.push(item);
            }
            this.copydictionary.nation = result;
          });
        } else {
          this.copydictionary.nation = JSON.parse(
            JSON.stringify(this.dictionary.nation)
          );
        }
      },
      focus() {
        this.copydictionary = JSON.parse(JSON.stringify(this.dictionary));
      },
      clear() {
        this.copydictionary = JSON.parse(JSON.stringify(this.dictionary));
      },
      PinyinMatchsex(val) {
        if (val) {
          let result = [];
          this.dictionary.sex.filter((item) => {
            if (item.dataTextAbbr.indexOf(val) != -1) {
              result.push(item);
            }
            this.copydictionary.sex = result;
          });
        } else {
          this.copydictionary.sex = JSON.parse(
            JSON.stringify(this.dictionary.sex)
          );
        }
      },
      PinyinMatchcertificates(val) {
        if (val) {
          let result = [];
          this.dictionary.certificates.filter((item) => {
            if (item.dataTextAbbr.indexOf(val) != -1) {
              result.push(item);
            }
            this.copydictionary.certificates = result;
          });
        } else {
          this.copydictionary.certificates = JSON.parse(
            JSON.stringify(this.dictionary.certificates)
          );
        }
      },
      PinyinMatchnationality(val) {
        if (val) {
          let result = [];
          this.dictionary.nationality.filter((item) => {
            if (item.dataTextAbbr.indexOf(val) != -1) {
              result.push(item);
            }
            this.copydictionary.nationality = result;
          });
        } else {
          this.copydictionary.nationality = JSON.parse(
            JSON.stringify(this.dictionary.nationality)
          );
        }
      },
      PinyinMatchagent_type(val) {
        if (val) {
          let result = [];
          this.dictionary.agent_type.filter((item) => {
            if (item.dataTextAbbr.indexOf(val) != -1) {
              result.push(item);
            }
            this.copydictionary.agent_type = result;
          });
        } else {
          this.copydictionary.agent_type = JSON.parse(
            JSON.stringify(this.dictionary.agent_type)
          );
        }
      },
      handleClick(data, checked, node) {
        console.log(data, node, '5454545')
        this.selectNode = data
        let selectObj = {
          regionType: data.regionType,
          regionId: data.id
        }

        //获取列表数据
        this.loadOrganizationListWithParentIdData(
          selectObj
        );
        this.getCemeteryType(selectObj)
        // if (checked.level === 4 && data.typeCode === 3) {
        //   this.$refs.organizationtree.setCheckedNodes([data]);

        //   this.data = this.$refs.organizationtree.getCheckedNodes();
        //   //获取列表数据
        //   this.loadOrganizationListWithParentIdData(
        //     this.data[this.data.length - 1]
        //   );
        // }
      },
      determine() {
        this.dialogVisibles = false;
        this.$emit("update:dialogVisible", this.dialogVisibles);
        this.$emit("input", this.selectname);
        this.wakeHalls = [];
      },
      //获取公墓类型
      async getCemeteryType(selectObj) {
        const res = await Type["findCemeteryType"](selectObj)
        if (res.code == 1) {
          this.cemeteryTypes = res.data
        } else {
          this.$message.error("加载数据失败")
        }
      },
      //获取树结构数据
      async getTreedata() {
        const res = await Type["getAreaTree"]({});
        if (!res.data || !res.data.length) {

          this.loading = false
          return;

        }
        // if (res.data) {

          this.treeData = res.data


          let firstSelectObj = this.treeData[0]
          let selectObj = {
            regionType: firstSelectObj.regionType,
            regionId: firstSelectObj.id
          }
          this.selectNode = this.treeData[0]
          this.loadOrganizationListWithParentIdData(selectObj);
          this.getCemeteryType(selectObj)

          // let firstSelectObj=this.treeData[0]
          // let selectObj={
          //   regionType:firstSelectObj.regionType,
          //   regionId:firstSelectObj.id
          // }
          // this.selectNode=this.treeData[0]
          // this.loadOrganizationListWithParentIdData(selectObj);
          // this.getCemeteryType(selectObj)
        // } else {
        //   this.$message.error("请求数据失败")
        // }
        // const { data } = res;
        // if (!data) {
        //   this.$message.error("加载数据失败");
        //   return;
        // }
        // console.log("区域树",data)
        // this.treeData=data
        // let firstSelectObj=this.treeData[0]
        // let selectObj={
        //   regionType:firstSelectObj.regionType,
        //   regionId:firstSelectObj.regionId
        // }


        // this.loadOrganizationListWithParentIdData(selectObj);
        // let node = {
        //   id: 0,
        //   label: "寄存管理",
        //   children: [],
        // };
        // this.treeInfoLoad = data;
        // node = this.getChildren(node, this.treeInfoLoad);
        // let treeArray = new Array();
        // treeArray.push(node);
        // this.treeData = treeArray;
        // console.log("树的数据", this.treeData);
        // this.checkChildren(this.treeData);
        // this.loadOrganizationListWithParentIdData(this.lastTreeData[0]);
        // this.selectNode=this.lastTreeData[0]

      },
      getChildren(node, data) {
        let this_get = this;
        let child = new Array();
        if (this_get.checkIsNode(node, data)) {
          if (data && data.length) {
            data.forEach((item) => {
              if (node.id == item.parentId && item.name) {
                let nodeItem = {
                  id: item.id,
                  label: item.name,
                  typeCode: item.typeCode,
                };
                if (this_get.checkIsNode(nodeItem, data)) {
                  if (!nodeItem.children) {
                    nodeItem.children = new Array();
                  }
                  nodeItem.children.push(this_get.getChildren(nodeItem, data));
                }
                child.push(nodeItem);
              }
            });
            node.children = child;
            return node;
          }
        } else {
          return node;
        }
      },
      checkIsNode(node, data) {
        let flag = false;
        if (data && data.length && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (node.id == data[i].parentId) {
              flag = true;
              return flag;
            }
          }
        }
        return flag;
      },
      //c
      async checkChildren(data) {
        await data.forEach((item) => {
          if (item.children) {
            this.checkChildren(item.children);
          } else {
            this.lastTreeData.push(item);
            return false;
          }
        });

      },
      //右侧数据
      loadOrganizationListWithParentIdData(data) {
        Type["findCemeteryList"](data).then((response) => {
          const {data} = response;
          if (!data) {
            this.$message.error("数据读取失败");
            return;
          }
          this.wakeHalls = data;
          this.loading = false
          // this.BuyerInfoDialogVisible=false
          // this.tableData = data;
          // this.EmployeeList = data;
        });
      },
    },
  };
</script>

<style scoped>
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
  }

  .box-card {
    flex: 0 0 200px;
    display: inline-block;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    margin-right: 10px;
  }

  .box-card .item {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    width: 100%;
    height: 90px;
    text-align: left;
    padding: 0 1em;
    border-radius: 5px;
    overflow: hidden;
  }

  .el-tree {
    min-height: 100%;
  }

  .item:hover {
    cursor: pointer;
  }

  .item:last-child {
    margin-bottom: 0px;
  }

  .item.sale {
    background-color: #ff6040;
  }

  /* .item.free {
    background: white;
    border: 0.5px solid #ccc;
  } */

  .item.repair {
    background: yellow;
  }

  .item.selected {
    background: lightgreen !important;
  }

  .item h2 {
    height: 30px;
    overflow: hidden;
  }

  /* 弹框文字白色 */
  .PageItem /deep/ .el-dialog__title,
  .PageItem /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .PageContent {
    padding: 20px;
    margin-top: 0;
  }

  .PageItem {
    padding: 0;
    background: #F6F9FF;
  }

  .el_row {
    height: 100%;
  }

  .el_col {
    height: 100%;
    box-sizing: border-box;
  }

  .right_col {
    /* background: #fff; */
    padding-top: 15px;
  }

  .types_item {
    margin-bottom: 20px;
    cursor: pointer;
    color: #fff;
  }

  .noclick {
    cursor: not-allowed;
  }

  .types_item .types_card .item_item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .types_item .types_card .item_item .item_left {
    margin-right: 20px;
  }

  .types_item .types_card .item_item .item_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .types_item .types_card .item_item .item_right span {
    line-height: 20px;
  }

  .types_item .types_card .item_item .item_right .number {
    font-size: 23px;
    line-height: 40px;
  }

  .types_item .types_card .item_item .item_left .left_img {
    width: 51px;
    height: 51px;
  }

  .types_item:nth-child(1) .types_card {
    background: #37B7FF;
  }

  .types_item:nth-child(2) .types_card {
    background: #FFC35C;
  }

  .types_item:nth-child(3) .types_card {
    background: #A566ED;
  }

  .types_item:nth-child(4) .types_card {
    background: #F87053
  }

  .types_item /deep/ .el-card {
    min-height: 100px;
    position: relative;
    color: #fff;
    border-radius: 10px;
  }

  .list_item {
    margin-bottom: 20px;
    cursor: pointer;

  }

  .list_item /deep/ .el-card {
    min-height: 166px;
    padding-top: 10px;
    position: relative;
    border-radius: 10px;

  }

  .list_item /deep/ .el-card.green {
    border-left: 10px solid #A566ED;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .list_item /deep/ .el-card.blue {
    border-left: 10px solid #FFC35C;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .list_item /deep/ .el-card.warn {
    border-left: 10px solid #F87053;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .list_item /deep/ .el-card .check_more {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .list_item .el-card .check_more /deep/ .el-icon-s-help {
    font-size: 30px;
  }

  .list_item .free {
    background: #67C23A;
    color: #fff;
  }

  .list_item .saled {
    background: #F56C6C;
    color: #fff;
  }

  .list_item /deep/ .el-card__body {
    padding: 0
  }

  .list_item .card_header {
    padding: 0 15px;
  }

  .list_item .card_content {
    /* border-top: 1px solid #ccc; */
    padding: 15px;
  }

  .list_item .card_content .dead_person_conent {
    display: flex;
    align-items: center;
  }

  .list_item .card_content .dead_person_conent .dead_person {
    flex: 1;
    padding: 10px 0;
    border-radius: 5px;
  }

  .list_item .card_content .dead_person_conent .dead_person .dead_btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .has_person {
    background: #F56C6C;
    color: #fff;
  }

  .dead_person .dead_content {
    min-height: 30px;
    /* margin-bottom: 20px; */
  }

  .list_item .item_item {
    display: flex;
    flex-direction: column;
    line-height: 40px;
    font-size: 16px;
    
  }
  .list_item .item_item span{
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .list_item .item_type {
    line-height: 30px;
  }

  .item_type_box {
    line-height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .item_type_box > div {
    flex: 1;
    text-align: center;
  }

  .list_item .card_footer {
    /* border-top: 1px solid #ccc; */
    display: flex;
    width: 100%;
    height: 40px;
    padding: 5px 0;
  }

  .dead_btn {
    text-align: center;
  }

  .list_item .card_footer .card_footer_splitline {
    width: 1px;
    height: 100%;
    background: #ccc;
  }

  .list_item .card_footer .card_footer_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list_wrapper {
    width: 100%;
    height: 85%;
    overflow-y: scroll;
  }

  .list_wrapper .el-row {
    width: 100%;
  }
</style>
